<template>
    <div class="center-page fn-clear">
        <div class="left common">
            <div class="title"><span>个人信息</span></div>
            <div class="content">
                <div class="head_img">
                    <img src="" />
                </div>
                <div class="line-box fn-clear">
                    <span class="p1">用户名称</span>
                    <span class="p2">admin</span>
                </div>
                <div class="line-box fn-clear">
                    <span class="p1">手机号码</span>
                    <span class="p2">13888888888</span>
                </div>
                <div class="line-box fn-clear">
                    <span class="p1">用户邮箱</span>
                    <span class="p2">601126229@qq.com</span>
                </div>
                <div class="line-box fn-clear">
                    <span class="p1">所属部门</span>
                    <span class="p2">技术部</span>
                </div>
                <div class="line-box fn-clear">
                    <span class="p1">所属角色</span>
                    <span class="p2">系统管理员</span>
                </div>
                <div class="line-box fn-clear">
                    <span class="p1">创建日期</span>
                    <span class="p2">2021-05-13 19:56:37</span>
                </div>
            </div>
        </div>
        <div class="right common">
            <div class="title"><span>基本资料</span></div>
            <div class="box">
                <avue-tabs :option="option"
             @change="handleChange"></avue-tabs>
                <span v-if="type.prop==='tab1'">
                    <avue-form :option="option1"
                                v-model="form"
                        @submit="submit"
                        @error="error"></avue-form>
                </span>
                <span v-else-if="type.prop==='tab2'">
                    <avue-form :option="option2"
                                v-model="form1"
                        @submit="submit1"></avue-form>
                </span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'center',
        data(){
            var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
            };
            var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.obj.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
            };
            return {
                type: {},
                option: {
                    column: [
                        {
                            label: '基本资料',
                            prop: 'tab1',
                        },
                        {
                            label: '修改密码',
                            prop: 'tab2',
                        }
                    ]
                },
                form:{
                    name:'测试',
                    tel:15094476084,
                    emaill:'601126229@qq.com',
                    sex:0
                },
                form1:{

                },
                option1:{
                    submitText: '保存',
                    column: [
                        {
                            label: '用户昵称',
                            prop: 'name',
                            span:24,
                            rules: [{
                            required: true,
                            message: "请输入用户昵称",
                            trigger: "blur"
                            }]
                        },
                        {
                            label: '手机号码',
                            prop: 'tel',
                            span:24,
                            rules: [{
                                required: true,
                                message: "请输入手机号码",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: '邮箱',
                            prop: 'emaill',
                            span:24,
                            rules: [{
                                required: true,
                                message: "请输入邮箱",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: '性别',
                            prop: 'sex',
                            type:'radio',
                            span:24,
                            dicData: [{
                                label: '男',
                                value: 0
                            }, {
                                label: '女',
                                value: 1
                            }]
                        }
                    ]
                },
                option2:{
                    column:[
                        {
                            label: '旧密码',
                            prop: 'oldpassword',
                            type: 'password',
                            span:24,
                            rules: [{
                                required: true,
                                message: "请输入旧密码",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: '新密码',
                            prop: 'password',
                            type: 'password',
                            span:24,
                            rules: [{ validator: validatePass, trigger: 'blur' }],
                            rules: [{
                                required: true,
                                trigger: "blur"
                            }]
                        },
                        {
                            label: '确认密码',
                            prop: 'surepassword',
                            type: 'password',
                            span:24,
                            rules: [{ validator: validatePass2, trigger: 'blur' }],
                            rules: [{
                                required: true,
                                trigger: "blur"
                            }]
                        }
                    ]
                }
            }
        },
        created(){
            this.type = this.option.column[0];
        },
        mounted(){
            // console.log(this.option1)
        },
        methods:{
            handleChange (column) {
                this.type = column
                // this.$message.success(JSON.stringify(column))
            },
            submit (form, done) {
                // this.$message.success(JSON.stringify(form));
                done()
            },
            submit1 (){
                
            },
            error (err) {
                this.$message.success('请查看控制台');
                console.log(err)
            }
        }
    }
</script>
<style>
    .center-page{
        width: 100%;
        background: rgba(0,0,0,.1);
        height: calc(100vh - 84px);
        padding: 10px;
        .left{
            float: left;
            height: 100%;
            width:32%;
            margin-right: 10px;
            background: #fff;
            .content{
                padding: 10px;
                .head_img{
                    border-bottom: 1px solid #e9e9e9;
                    padding: 30px 0;
                    img{
                        width:6rem;
                        height:6rem;
                        border-radius: 50%;
                        background-color: aqua;
                        display: block;
                        margin: 0 auto;
                        overflow: hidden;
                    }
                }
                .line-box{
                    padding:15px 0;
                    font-size: 14px;
                    color: #555;
                    border-bottom: 1px solid #e9e9e9;
                    .p1{
                        float: left;
                    }
                    .p2{
                        float: right;
                    }
                }
            }
        }
        .right {
            float: left;
            width:calc(68% - 10px);
            background: #fff;
            height: 100%;
            .box{
                padding: 10px;
            }
        }
        .common{
            border-radius: 3px;
            .title{
                font-size: 14px;
                padding: 10px;
                border-bottom: 1px solid #e2e1e1;
            }
        }
    }
</style>